<template>
	<view class="item-info" :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''">
		<view class="cate-content">
			<view class="item-fixed-top">
				<view class="title">{{title}}</view>
				<view class="close" @click="close">
					<image src="../../static/images/close.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="cate-list comm-list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="i-tit-box">
						<view class="tit-txt">{{item.title}}</view>
					</view>
					
					<!-- 费用类型 -->
					<view class="iot-info-box iot-info-box-line">
						<view class="i-o-t">
							<view class="iot-t-txt">{{outlayTypeLb}}</view>
							<view class="iot-t-value">{{item.title}}</view>
						</view>
					</view>
					
					<!-- 费用金额 -->
					<view class="iot-info-box iot-info-box-line">
						<view class="i-o-t">
							<view class="iot-t-txt">{{outlayMoneyLb}}</view>
							<view class="iot-t-value">{{item.fee}}</view>
						</view>
					</view>
					
					<!-- 垫付方式 -->
					<view class="iot-info-box iot-info-box-line" :class="item.cdo == 1 || item.cdo == 2 ? '' : 'iot-info-box-p-b'">
						<view class="i-o-t">
							<view class="iot-t-txt">{{advanPayMethLb}}</view>
							<view class="iot-t-value">{{item.cdoTitle}}</view>
						</view>
					</view>
					
					<!-- 支付方式 -->
					<view class="iot-info-box iot-info-box-p-b" v-show="item.cdo != 2">
						<view class="i-o-t">
							<view class="iot-t-txt">{{payTypeLbTxt}}</view>
							<view class="iot-t-value">{{item.paytitle}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="outlay-btn-box">
				<view class="outlay-count-box">
					<view class="o-count-mon">
						<view class="o-c-m-f-a">{{outlayTolTxt}}<text class="o-c-m-a-v">{{feeAbsTotal}}</text></view>
						<view class="o-count-num">{{tolTxt}}<text class="o-c-n-v">{{feeNum}}</text>{{utilXiang}}</view>
						<view class="o-c-m-f">{{feeTotal > 0 ? outlayAddLbTxt : outlaySubLbTxt}}<text class="o-c-m-f-v">{{Math.abs(feeTotal)}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import staticConst from "../../js/const/StaticConst.js";
	import config from "../../js/conf/Config.js";
	import lang from "../../js/conf/Lang.js";
	import https from "../../js/https/Https.js";
	import util from "../../js/util/Util.js";
	export default {
		data() {
			return {
				title : lang.outlay.outlayDetaiTit,
				openShow : 0,
				
				outlayList : [], //系统创建的费用列表
				//init_info.fee_info.fee_ls = []
				methTxtArr : lang.outlay.methTxtArr,
				
				outlayTypeLb : lang.outlay.outlayTypeLb,
				delTxt:lang.deleTitTxt,
				
				outlayMoneyLb : lang.outlay.outlayMoneyLb,
				oulayMonTip : lang.inputTipTxt + lang.outlay.outlayMoneyLb,
				
				advanPayMethLb : lang.outlay.advanPayMethLb,
				adVanPayList : [],//系统垫付方式，3种
				
				addOutLayBtnTxt : lang.outlay.addOutLayBtnTxt,
				
				newOutlayBtnTxt :lang.outlay.newOutlayBtnTxt,
				sureBtnTxt: lang.outlay.sureBtnTxt,
				
				outlayNameTxt : lang.outlay.outlayNameTxt,
				
				outlayRemarkTxt : lang.remarksTxt.title,
				
				saveTxt:lang.saveTxt,
				
				outlayTolTxt: lang.outlay.outlayTolTxt,
				outlayAddLbTxt: lang.outlay.outlayAddLbTxt,
				outlaySubLbTxt: lang.outlay.outlaySubLbTxt,
				
				tolTxt:lang.tolTxt,
				utilXiang:lang.utilXiang,
				
				list:[],//选择的或添加的费用列表
				
				payTypeList:[],
				
				feeAbsTotal:0,//所有费用绝对值相加
				feeNum:0,//记录有多少项
				feeTotal:0,//技术费用，加减 为负数 显示‘减少’，正数‘增加’字样
				addTxt:"",
				payTypeLbTxt:lang.payTypeLbTxt,
			};
		},
		
		methods: {
			
			initData(data)
			{
				console.log("费用详情列表===：",data);
				this.list = data.list;
				for(let i = 0; i<this.list.length;i++)
				{
					let obj = this.list[i];
					obj.cdoTitle = this.getAdvanPayObj(obj.cdo);
				}
				this.feeNum = this.list.length;
				this.feeAbsTotal = data.fee_total;
				this.feeTotal = data.amount_fee;
			},
			
			getAdvanPayObj(id)
			{
				let arr = lang.outlay.methTxtArr;
				let len = arr.length;
				for(let i = 0; i<len; i++)
				{
					let obj = arr[i];
					if(obj.id == id)
					{
						return obj.title;
					}
				}
			},
			
			/**显示费用面板 */
			show(type)
			{
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.openShow = 2;
				setTimeout(() => {
					this.openShow = state;
				}, timer);
			},
			
			clearData()
			{
				this.list = [];
				this.feeAbsTotal = 0;//所有费用绝对值相加
				this.feeNum = 0;//记录有多少项
				this.feeTotal = 0;//技术费用，加减 为负数 显示‘减少’，正数‘增加’字样
				this.addTxt = "";
			},
			
			/***关闭费用***/
			close()
			{
				this.show();
			},
		},
	}
</script>
<style lang="scss">
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9999;
		transition: 0.3s;
		.mask-content {
			width: 100%;
			max-height: 250px;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: 0.3s;
			
			.new-outlay-tit-box
			{
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				border-bottom: 1px solid #ECECEC;
				.title
				{
					font-size: 16px;
				}
				.close
				{
					position: absolute;
					right: 5px;
					top: 12px;
					width: 32px;
					height: 32px;
					text-align: center;
					cursor: pointer;
					image
					{
						width: 14px;
						height: 14px;
					}
				}
			}
			
			.new-lay
			{
				background-color: #fff;
				padding-left: 15px;
				padding-right: 15px;
				padding-top: 10px;
				.n-l-txt-box
				{
					display : flex;
					align-items : center;
					.n-l-lb
					{
						
					}
				}
				
				.save-btn
				{
					height: 60px;
					width: 100%;
					line-height: 60px;
					text-align: center;
					background-color: #3388ff;
					color: #fff;
				}
			}
			
		}
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.4);
			.mask-content {
				transform: translateY(0);
			}
		}
	}
	.item-info {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		background: #FFF;
		transition: 0.3s;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.cate-content {
			border-radius: 6px;
			overflow: hidden;
			width: 500px;
			background: #F8F8F8;
			float: right;
			transform: translateY(-100%);
			transition: 0.3s;
			position: relative;
			.item-fixed-top
			{
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				border-bottom: 1px solid #ECECEC;
				.title
				{
					font-size: 16px;
				}
				.close
				{
					position: absolute;
					right: 5px;
					top: 12px;
					width: 32px;
					height: 32px;
					text-align: center;
					cursor: pointer;
					image
					{
						width: 14px;
						height: 14px;
					}
				}
			}
		}
	
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.3);
			.cate-content {
				transform: translateY(0);
			}
		}
	}
	.cate-list
	{
		height: 500px;
		
		.item
		{
			// padding-top: 10px;
			// padding-left: 35px;
			color: #333;
			.i-tit-box
			{
				display: flex;
				padding: 10px 15px;
				.tit-txt
				{
					
				}
				
				.del-txt
				{
					margin-left: auto;
					color: red;
					cursor: pointer;
				}
				.del-txt:hover
				{
					color: #e30003;
				}
			}
			
			.iot-info-box
			{
				background-color: #fff;
				// padding: 5px 15px;
				padding-left: 15px;
				padding-right: 15px;
				padding-top: 10px;
				.i-o-t
				{
					display: flex;
					align-items: center;
					.iot-t-txt
					{
						padding-right: 50px;
					}
					.iot-t-value
					{
						color: #999;
					}
				}
			}
			.iot-info-box-line
			{
				border-bottom: 1px solid #f2f2f2;
			}
			
			.iot-info-box-p-b
			{
				padding-bottom: 10px;
			}
		}
		
		// <view class="add-ol-btn-box">
		// 	<view class="ol-btn">{{addOutLayBtnTxt}}
		// 	</view>
		// </view>
		
		.add-ol-btn-box
		{
			padding:60px;
			width: calc(100% - 120px) ;
			display: flex;
			justify-content: center;
			.ol-btn
			{
				height: 36px;
				width: 100px;
				color: #3388ff;
				border: 1px #3388ff solid;
				background-color: #fff;
				border-radius: 6px;
				line-height: 36px;
				text-align: center;
				cursor: pointer;
			}
			.ol-btn:hover
			{
				color: #FFF;
				background-color: #3388ff;
			}
		}
	}
	.outlay-btn-box
	{
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		font-size: 14px;
		// justify-content: center;
		// background: #3388FF;
		// color: #FFF;
		// font-size: 16px;
		// z-index: 999;
		background-color: #fff;
		border-top: #EEE 1px solid;
		.n-s-btn-box
		{
			margin-left: auto;
			display: flex;
			.new-outlay-btn
			{
				width: 100px;
				height: 100%;
				line-height: 60px;
				background-color: #EEE;
				text-align: center;
				color: #333;
				cursor: pointer;
			}
			
			.new-outlay-btn:hover
			{
				background-color: #DDD;
			}
			
			.sure-btn
			{
				width: 100px;
				height: 100%;
				line-height: 60px;
				background-color: #3388ff;
				opacity: .9;
				color: #fff;
				text-align: center;
				cursor: pointer;
			}
			
			.sure-btn:hover
			{
				opacity: 1;
			}
		}
		
		// <view class="outlay-count-box">
		// 	<view class="o-count-num">{{tolTxt}}<text>{{}}</text>{{utilXiang}}</view>
		// 	<view class="o-count-mon">
		// 		<view class="o-c-m-f-a">{{outlayTolTxt}}<text class="o-c-m-a-v">{{feeAbsTotal}}</text></view>
		// 		<view class="o-c-m-f">{{feeTotal > 0 ? outlayAddLbTxt : outlaySubLbTxt}}<text class="o-c-m-f-v">{{feeTotal}}</text></view>
		// 	</view>
		// </view>
		.outlay-count-box
		{
			color: #333;
			padding-left: 10px;
			.o-count-num
			{
				.o-c-n-v
				{
					font-weight: bold;
					padding-left: 8px;
					padding-right: 8px;
				}
			}
			.o-count-mon
			{
				display: flex;
				.o-c-m-f-a
				{
					.o-c-m-a-v
					{
						font-weight: bold;
						padding-left: 8px;
						padding-right: 8px;
					}
				}
				.o-c-m-f
				{
					.o-c-m-f-v
					{
						font-weight: bold;
						padding-left: 8px;
						padding-right: 8px;
					}
				}
			}
		}
		
		
	}
</style>